import React from 'react';
import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Dimensions,
} from 'react-native';

const { width: screenWidth } = Dimensions.get('window');

export interface AlertButton {
  title: string;
  onPress?: () => void;
  highlighted?: boolean;
}

export interface AlertDialogProps {
  visible: boolean;
  title?: string;
  subtitle?: string;
  buttons?: AlertButton[];
  onDismiss?: () => void;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  visible,
  title,
  subtitle,
  buttons = [],
  onDismiss,
}) => {
  const handleBackdropPress = (): void => {
    if (onDismiss) {
      onDismiss();
    }
  };

  const handleButtonPress = (button: AlertButton): void => {
    if (button.onPress) {
      button.onPress();
    }
    if (onDismiss) {
      onDismiss();
    }
  };

  const renderButtons = (): React.ReactNode => {
    if (buttons.length === 0) return null;

    const isHorizontalLayout = buttons.length <= 2;

    if (isHorizontalLayout) {
      return (
        <View className="flex-row">
          {buttons.map((button, index) => (
            <TouchableOpacity
              key={index}
              className={`
                flex-1 items-center justify-center py-4 bg-transparent
                ${index > 0 ? 'border-l-[0.5px] border-gray-300' : ''}
                ${button.highlighted ? 'bg-blue-50' : ''}
              `}
              onPress={() => handleButtonPress(button)}
              activeOpacity={0.2}
            >
              <Text
                className={`
                  text-17 
                  ${
                    button.highlighted
                      ? 'text-brand1 font-semibold'
                      : 'text-text1 font-normal'
                  }
                `}
              >
                {button.title}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      );
    }

    return (
      <View className="flex-col">
        {buttons.map((button, index) => (
          <TouchableOpacity
            key={index}
            className={`
              w-full items-center justify-center py-4 bg-transparent
              ${index > 0 ? 'border-t-[0.5px] border-gray-300' : ''}
              ${button.highlighted ? 'bg-blue-50' : ''}
            `}
            onPress={() => handleButtonPress(button)}
            activeOpacity={0.2}
          >
            <Text
              className={`
                text-17
                ${
                  button.highlighted
                    ? 'text-brand1 font-semibold'
                    : 'text-text1 font-normal'
                }
              `}
            >
              {button.title}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="none"
      onRequestClose={onDismiss}
      hardwareAccelerated
    >
      <TouchableWithoutFeedback onPress={handleBackdropPress}>
        <View className="flex-1 bg-black/40 justify-center items-center px-10">
          <TouchableWithoutFeedback>
            <View className="bg-gray-100 rounded-[14px] w-full max-w-[270px] overflow-hidden">
              {/* 标题和副标题区域 */}
              <View className="pt-5 px-4 pb-5 items-center">
                {title && (
                  <Text className="text-[18px] font-semibold text-black text-center mb-1">
                    {title}
                  </Text>
                )}
                {subtitle && (
                  <Text className="text-[14px] text-text2 text-center leading-[18px] mt-1">
                    {subtitle}
                  </Text>
                )}
              </View>

              {/* 按钮区域 */}
              {buttons.length > 0 && (
                <View className="border-t-[0.5px] border-gray-300">
                  {renderButtons()}
                </View>
              )}
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

export default React.memo(AlertDialog);
